<template>
	<view class="picture-tailor" :class="{'picture-tailor-show':isShow}">
		<movable-area class="picture-area">
			<movable-view class="picture-view" :style="{width:img_width/img_scaling+'px',height:img_height/img_scaling+'px'}"
			 direction="all" :x="offsetX" :y="offsetY" scale="true" :scale-min="scaleMin" @change="movableChange" @scale="movableScale">
				<image :style="{width:img_width/img_scaling+'px',height:img_height/img_scaling+'px'}" :src="pictureSrc"></image>
			</movable-view>
		</movable-area>
		<view class="select-box"></view>
		<button class="button-view" @click="createImg">完成</button>
		<view style="position:fixed; top:9999999px;">
			<canvas canvas-id="picture-canvas" class="canvas-view"></canvas>
		</view>
	</view>
</template>

<script>
	
let tailorSize = 240; // 需要截取的尺寸240x240px，此变量要和样式中的240px和120px相对应，120px为此变量的一半，若要修改成其他值一定要一一对应
let	newOffsetX = 0; // 拖动缩放完成后的X轴偏移量
let newOffsetY = 0; // 拖动缩放完成后的Y轴偏移量

export default {
	name: "picture-tailor",
	props: {
		// 图片路径
		pictureSrc: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			offsetX: 0, // 图像初始化的X轴偏移量
			offsetY: 0, // 图像初始化的Y轴偏移量
			img_width: 0, // 图片真实宽度
			img_height: 0, // 图片真实高度
			img_scaling: 1, //图片初始化缩放比例
			scale: 1, // 拖动缩放完成后的图片缩放比例
			scaleMin: 0.5, // 最小缩放值
			isShow: false
		};
	},
	watch: {
		pictureSrc() {
			this.getImgInfo();
		}
	},
	methods: {
		// 显示组件
		onShow() {
			this.isShow = true;
		},
		// 隐藏组件
		onHide() {
			this.isShow = false;
		},
		// 初始化图片
		getImgInfo() {
			uni.getImageInfo({
				src: this.pictureSrc,
				success: (res) => {
					// 图片宽高
					this.img_width = res.width;
					this.img_height = res.height;
					// 屏幕可用宽高
					let sysInfo = uni.getSystemInfoSync();
					let windowWidth = sysInfo.windowWidth;
					let windowHeight = sysInfo.windowHeight;
					
					// 计算初始缩放比和最小缩放值
					if (this.img_width < tailorSize || this.img_height < tailorSize) { // 当图片宽或高小于240px时
						let count = this.img_width <= this.img_height ? this.img_width : this.img_height;
						this.img_scaling = count / tailorSize;
						this.scaleMin = 1;
					} else if (this.img_width > windowWidth && this.img_width <= this.img_height) { // 当图片宽度大于屏幕宽度并且图片宽度小于图片高度时
						this.img_scaling = this.img_width / windowWidth;
						this.scaleMin = tailorSize / windowWidth;
					} else {
						let count = this.img_width <= this.img_height ? this.img_width : this.img_height;
						this.scaleMin = tailorSize / count;
					}

					// 计算图片居中显示时的偏移量
					this.offsetX = -(this.img_width / this.img_scaling / 2 - tailorSize / 2);
					this.offsetY = -(this.img_height / this.img_scaling / 2 - tailorSize / 2);
					// 获取新的偏移量
					newOffsetX = this.offsetX;
					newOffsetY = this.offsetY;
				}
			})
		},
		// 计算拖动偏移量
		movableChange(e) {
			newOffsetX = e.detail.x
			newOffsetY = e.detail.y
		},
		// 计算缩放比例和偏移量
		movableScale(e) {
			newOffsetX = e.detail.x
			newOffsetY = e.detail.y
			this.scale = e.detail.scale;
		},
		// 截取图片
		createImg() {
			let ctx = uni.createCanvasContext("picture-canvas");
			ctx.drawImage(this.pictureSrc, newOffsetX, newOffsetY, this.img_width /
				this.img_scaling * this.scale,
				this.img_height / this.img_scaling * this.scale);
			ctx.draw(false, () => {
				uni.canvasToTempFilePath({
					// 截取图片尺寸
					destWidth: tailorSize / 2,
					destHeight: tailorSize / 2,
					canvasId: "picture-canvas",
					success: (res) => {
						console.log(res.tempFilePath)
						this.onHide();
						this.$emit("createImg", res.tempFilePath)
					}
				});
			});
		}
	}
}
</script>

<style>
	.picture-tailor {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		transform: translateX(100%);
		transition: all 200ms ease;
		visibility: hidden;
	}

	.picture-tailor-show {
		transform: translateY(0) !important;
		visibility: visible;
	}

	/* 拖动域的位置和大小 */
	.picture-tailor .picture-area {
		width: 240px;
		height: 240px;
		position: absolute;
		/* 使其居中定位 */
		top: calc(50% - 120px);
		left: calc(50% - 120px);
	}

	/* 拖动控件的大小 */
	.picture-area .picture-view {
		min-width: 240px;
		min-height: 240px;
	}

	/* 中间选择框的大小，本意是视觉上模拟拖动域 */
	.select-box {
		position: absolute;
		top: calc(50% - 120px);
		left: calc(50% - 120px);
		width: 240px;
		height: 240px;
		box-sizing: border-box;
		border-radius: 50%;
		border: #FFFFFF 1px solid;
		pointer-events: none;
	}

	.button-view {
		position: absolute;
		bottom: 20px;
		right: 20px;
		width: 60px;
		background-color: #007AFF;
		font-size: 14px;
		color: #FFFFFF;
	}

	/* 画布大小，画布大小就是截取的原始大小 */
	.canvas-view {
		width: 240px;
		height: 240px;
		visibility: hidden;
	}
</style>
